<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="container" ref="usage_ref" style="width: 100%;height: 90%;"></div>
			<div class="centerInfo"></div>
			<!-- <div>{{Amount}}</div> -->
			<!-- <div>{{Sum-Amount}}</div> -->
		</div>
	</div>
</template>

<script setup>
	export default {
		name: "StableUsage",
		data() {
			return {
				chartInstance: null,
				allData: null
			};
		},
		mounted() {
			this.initChart();
			this.getData();
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
			},
			getData() {
				//服务器的数据请求位置

				// this.allData = ret
				this.updateChart();
			},
			updateChart() {
				const option = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow"
						}
					},
					legend: {
						data: ["已完成", "施工中"],
						textStyle: {
							color: "#ffffff"
						},
						itemHeight: 8,
						itemWidth: 15,
						// y: 20
						right:'8.5%',
					},
					grid: {
						//x轴与y轴离dom边的距离
						top: "24%",
						right: "10%",
						bottom: "15%",
						left: "10%"
					},
					axisTick: {
						distance: -30,
						length: 8,
						lineStyle: {
							color: "#fff",
							width: 2
						}
					},
					splitLine: {
						distance: -30,
						length: 30,
						lineStyle: {
							color: "#fff",
							width: 4
						}
					},
					xAxis: {
						name: "队伍",
						type: "category",
						data: [
							"1",
							"2",
							"3",
							"4",
							"5",
							"6",
							"7",
							"8",
							"9",
							"10",
							"11",
							"12",
							"13",
							"14"
						],
						axisLine: {
							lineStyle: {
								// 设置x轴颜色
								color: "#fff"
							}
						}
					},
					yAxis: {
						name: "完井数量",
						type: "value",
						axisLine: {
							lineStyle: {
								// 设置x轴颜色
								color: "#fff"
							}
						}
						// splitLine: {
						//   show: false // X轴线 颜色类型的修改
						// }
					},
					series: [{
							name: "已完成",
							type: "bar",
							stack: "Ad",
							barGap: 0,
							emphasis: {
								focus: "series"
							},
							data: [70, 20, 40, 40, 20, 60, 20, 50, 20, 40, 40, 20, 30, 10],
							itemStyle: {
								color: "#009be3"
							}
						},
						{
							name: "施工中",
							type: "bar",
							stack: "Ad",
							emphasis: {
								focus: "series"
							},
							data: [7, 2, 4, 4, 2, 6, 2, 5, 2, 4, 4, 2, 3, 1],
							itemStyle: {
								color: "#e8b601"
							}
						}
					]
				};
				this.chartInstance.setOption(option);
			}
		},
		props: {
			title: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.tabel_Background {
		margin-top: 2%;
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 50%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		background-image: url("../../assets/Panel@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 40%;
		height: 10%;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}
</style>
